<template>
  <a-list
      class="demo-loadmore-list"
      :loading="props.initLoading"
      item-layout="horizontal"
      :data-source="props.habitList"
      :pagination="pagination"
  >
    <template #renderItem="{ item }">
      <a-list-item>
        <template #actions>
          <a key="list-loadmore-edit" @click="showEditModel(item)">edit</a>
          <a key="list-loadmore-more" @click="toDetailPage(item)">more</a>
          <a-popconfirm
              title="ARE YOU SURE DELETE THIS HABIT?"
              ok-text="Yes"
              cancel-text="No"
              @confirm="deleteHabit(item)"
              @cancel="cancel"
          >
            <a key="list-loadmore-delete" style="color:red">delete</a>
          </a-popconfirm>
        </template>
        <a-skeleton :title="false" :loading="!!item.loading" active>
          <a-list-item-meta
              :description="item.habitProfile"
          >
            <template #title>
              {{ item.title }}
            </template>
          </a-list-item-meta>
          <div>
            <a-space direction="horizontal" >
              <p>开始时间：{{item.createTime}}</p>
              <p>结束时间：{{item.endTime}}</p>
            </a-space>
          </div>
        </a-skeleton>
      </a-list-item>
    </template>
  </a-list>
  <a-divider/>
  <a-modal v-model:open="open" title="EDIT HABIT" @ok="handleOk" :confirm-loading="confirmLoading">
    <a-form  :label-col="labelCol" :wrapper-col="wrapperCol" >
      <a-form-item label="标题">
        <a-input v-model:value="title" />
      </a-form-item>
      <a-form-item label="此习惯的说明">
        <a-textarea v-model:value="habitProfile" />
      </a-form-item>
      <a-form-item label="结束时间">
        <a-date-picker v-model:value="endTime" :disabled-date="disabledDate"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import {ref} from "vue";
import dayjs from "dayjs";
import myAxios from "../axios.js";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
const router = useRouter();
const toDetailPage = (item) => {
  router.push({
    path: '/habitDetailPage',
    query: {
      id : item.id,
    }
      }
    )
}
const disabledDate = current => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};
const endTime =ref();
const title = ref('');
const habitProfile = ref('');
const open = ref(false);
const saveItem = ref();
const showEditModel = (item)=>{
  open.value = true;
  title.value =item.title;
  habitProfile.value = item.habitProfile;
  endTime.value = dayjs(item.endTime);
  saveItem.value = item;
}
const confirmLoading = ref(false);
const deleteHabit = (item) => {
  myAxios.delete('/habit/delete?id='+item.id).then(
      res => {
        if(res.code === 0 && res.data){
          props.habitList.indexOf(item);
          props.habitList.splice(item,1);
          message.success('删除成功');
        }
        else{
          message.error('删除失败，请重试');
        }
      }
  )
}
const handleOk = () => {
  let status = false;
  let submitData = {
    id:saveItem.value.id,
    title:title.value,
    habitProfile:habitProfile.value,
    endTime: null
  }
  if(endTime.value !== undefined){
    submitData.endTime = endTime.value.format('YYYY-MM-DD');
  }
  let msg = '';
  myAxios.post('/habit/edit',submitData).then(
      res => {
        if(res.code === 0){
          status = true;
        }
        else{
          msg = res.message;
        }
      }
  ).catch(error => {
    console.log("编辑HABIT出现错误",error);
  })
  confirmLoading.value = true;
  setTimeout(()=>{
    if(status){
      emit('update');
      open.value = false;
      title.value ='';
      habitProfile.value = '';
      endTime.value = null;
      confirmLoading.value = false;
      message.success('编辑成功')
    }else{
      confirmLoading.value = false;
      endTime.value = null;
      message.error(msg);
    }
  },2000)
}
const emit = defineEmits(['update']);
const props = defineProps({
  initLoading:{
    type : Boolean,
    default: true
  },
  habitList: {
    type: Array,
    default(){
      return [];
    }
  }
})
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
const pagination = {
  onChange: (number) => {
    console.log(page);
  },
  pageSize: 4,
};
</script>
<style scoped>
.demo-loadmore-list {
  min-height: 350px;
}
</style>